import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import SearchInput from '../searchInput/SearchInput'
import './Category.scss'
import myaxios from '../../utils/myaxios'
import './Category.scss'
import axios from 'axios'

class Category extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        categories: [], /* 返回的菜单数据 */
        categories_content: [],  /* 右边菜单渲染的内容 */
        select_index: 0 /* 当前选中左边的菜单 */
    }
    // 左边分类菜单点击的时候触发
    handleItemClick = (e) => {
        // 获取点击选中的项
        let select_index = e.target.getAttribute('data-index');
        console.log(select_index);
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories
            [select_index].children,
        })
    }

    // 右边图片点击的时候
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute('data-index');
        this.props.history.push('/goodList?cid=' + cid);
    }

    componentWillUnmount() {
        this.source.cancel('取消分类菜单的请求');
    }

    // 获取分类菜单的数据
    getCategories = (params) => {
        myaxios
            .get("categories", {
                cancelToken: this.source.token
            })
            // .get("categories")
            .then((res) => {
                this.setCategories(res);
            })
            .catch((err) => {
                console.log(err);
            })
    }

    // 设置分类菜单的数据
    // is_storaged 代表是否之前已经缓存过
    setCategories = (res, is_storaged) => {
        // 缓存请求的数据
        let categories_cache = {};
        // 如果之前没有缓存过
        if (!is_storaged) {
            categories_cache = { date: Date.now(), categories: res };
            // 缓存到本地
            localStorage.setItem('categories_cache', JSON.stringify(categories_cache));
        }
        this.setState({
            categories: res,
            categories_content: res[0].children,
        })
    }

    componentDidMount() {
        // 进来的时候先判断本地缓存是否过期
        // 如果没有过期，直接获取本地缓存
        let categories_cache = localStorage.getItem('categories_cache');
        //如果本地缓存不为空
        if (categories_cache && JSON.parse(categories_cache).date) {
            // 判断本地缓存是否过期
            // 当前时间
            let current_time = Date.now();
            // 存储的时间
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                // 一小时过期时间
                this.getCategories();
            } else {
                // 缓存没有过期的话
                // 第二个参数 代表是否已经缓存
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            // 缓存为空
            this.getCategories();
        }
    }

    render() {
        return (
            <div className='yg-category'>
                {/* 首页导航条 */}
                <div className="yg-category-nav">
                    <NavBar className="category-nav">商品分类</NavBar>
                </div>
                {/* 首页导航条 */}
                {/* 搜索框 */}
                <div className="yg-category-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索框 */}
                {/* 分类菜单 */}
                <div className="yg-category-content">
                    {/* 利用冒泡机制处理点击事件 */}
                    <div className="content-left" onClick={this.handleItemClick}>
                        {this.state.categories.map((v, index) => {
                            return (<div data-index={index} className={
                                this.state.select_index === index ? 'active content-left-item' : 'content-left-item'
                            } key={v.cat_id}>
                                {v.cat_name}
                            </div>
                            )
                        })}
                    </div>
                    <div className="content-right">
                        {this.state.categories_content.map((v, i) => {
                            return (
                                <div className=
                                    'content-right-item'
                                    key={v.cat_id}>
                                    {/* 二级菜单 */}
                                    <div className="right-item-title">
                                        {'/'}
                                        {v.cat_name}
                                        {'/'}
                                    </div>
                                    {/* 二级菜单 */}
                                    {/* 产品列表 */}
                                    <div className="product-list">
                                        {
                                            v.children && v.children.map(v => {
                                                return <div key={v.cat_id} className='product-list-item' data-index={v.cat_id}>
                                                    <div className='imageWrapper'>
                                                        <img
                                                            onClick={this.handleProductItemClick} src={v.cat_icon} alt="" data-index={v.cat_id} />
                                                    </div>
                                                    <div className='item-title'
                                                        data-index={v.cat_id}>{v.cat_name}
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                    {/* 产品列表 */}
                                </div>)
                        })}
                    </div>
                </div>
                {/* 分类菜单 */}
            </div>
        );
    }
}

export default Category;
